<template>
	<view>
		<view>
			使用 storage的案例, 本项目是采用useStorage的形式进行使用。
		</view>
		
		<up-line></up-line>
				
		<up-button text="设置存储数据  name 李四" type="primary" class="custom-style"  @click="handleSetStorage"></up-button>
		<up-line></up-line>
		<!-- 根据key获取存储数据 的值 -->
		<view >
			<up-button text="根据key获取存储数据" class="custom-style"  @click="handleGetByKey"></up-button>

			<view>
				'name'的值为{{ name }}
			</view>
		</view>
		<up-line></up-line>
		<!-- 获取storage 的值 -->
		<view >
			<up-button text="获取全部存储数据" class="custom-style"  @click="getAllStorage"></up-button>
				{{ storageD }}
		</view>
		
		
		
	</view>
</template>

<script setup>
	import { computed, ref } from "vue";
	import { storage, storageData, storageExpire }  from "@/utils/storage/index.js"
	
	  
	function handleSetStorage() {
		storage.set("name", "李四")
	}
	
	let storageD = ref(null)
	
	function getAllStorage() {
		storageD.value = storageData()
	}
	
	let name = ref('');
	function  handleGetByKey() {
		name.value = storage.get('name')
	}
	
</script>

<style scoped>


.custom-style {
	margin-top: 20rpx;
	width: 360rpx;
}	       
</style>
